<template>
  <view class="jiaAddress">
    <view class="bgRadius">
      <view class="list flex flex-align">
        <view class="name">收货人</view>
        <input type="text" placeholder="请输入收货人姓名" v-model="dataInfo.name">
      </view>
      <view class="list flex flex-align">
        <view class="name">手机号</view>
        <input type="number" placeholder="请输入收货人手机号" v-model="dataInfo.phone">
      </view>
    </view>
    <view class="tabIndex flex flex-align">
      <image @click="tanIndex(0)" class="flex-1" :src="tanInx==0?'/static/address/address06.png':'/static/address/address08.png'"  mode="scaleToFill"  />
      <image @click="tanIndex(1)" class="flex-1" :src="tanInx==1?'/static/address/address07.png':'/static/address/address05.png'"  mode="scaleToFill"  />
    </view>
    <view class="bgRadius" style="border-radius: 0;">
      <view class="list flex flex-align">
        <view class="name">所在地区</view>
        <uni-data-picker class="my-data-picker" v-slot:default="{data, error, options}" :ellipsis="true"  v-model="dataInfo.selectedValue"  :localdata="areaData" popup-title="请选择地区" @change="onchange" @nodeclick="onnodeclick">
          <view class="selected-item">
            {{dataInfo.selectedValue}}
          </view>
        </uni-data-picker>
        <uni-icons type="right" size="16" color="#969799"></uni-icons>
      </view>
      <view class="list flex mt10" style="height: auto;">
        <view class="name">详细地址</view>
        <textarea name="" id="" placeholder="请输入详细地址" v-model="dataInfo.address"></textarea>
      </view>
    </view>
    <view class="bgRadius">
      <view class="list flex flex-align flex-bt">
        <view class="moren">
          <view>设置默认地址</view>
          <view class="tishi">每次下单都会默认使用该地址</view>
        </view>
        <switch :checked="dataInfo.is_default" @change="switch1Change" color="#FE7431" style="transform:scale(0.9)" />
      </view>
      
    </view>
    <view class="footBont">
      <view class="addBtn" @click="submite">确认添加</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import areaData from '@/utils/city.json'
import { addressAdd } from '@/api/user'
import { toast } from '@/utils/tools'
import { onLoad } from '@dcloudio/uni-app'
import { goodStorage } from '@/utils'
const type = ref(0)
const tanInx = ref(0)
const dataInfo = ref<any>({
  province: '',
  city: '',
  area: '',
  phone: '',
  is_default:true,
  name: '',
  id:0,
  province_code: '',
  city_code: '',
  area_code: '',
  address: '',
  selectedValue: '请选择地址',
})
onLoad((e:any)=>{
  type.value = e.type
  if (e.type==1) {
    dataInfo.value = goodStorage.get('routerInfo')
    dataInfo.value.selectedValue = dataInfo.value.province+dataInfo.value.city+dataInfo.value.area
  }
})
const tanIndex = (index: number) => {
  tanInx.value = index
}
const onchange = (e:any) => {
  dataInfo.value.province = e.detail.value[0].text
  dataInfo.value.city = e.detail.value[1].text
  dataInfo.value.area = e.detail.value[2].text
  dataInfo.value.province_code = e.detail.value[0].value
  dataInfo.value.city_code = e.detail.value[1].value
  dataInfo.value.area_code = e.detail.value[2].value
  dataInfo.value.selectedValue = dataInfo.value.province+dataInfo.value.city+dataInfo.value.area
}
const onnodeclick = (e:any) => {
  
}
const switch1Change = (e:any) => {
  dataInfo.value.is_default = e.detail.value
}
function submite() {
  if (!dataInfo.value.province || !dataInfo.value.phone || !dataInfo.value.name || !dataInfo.value.address) {
    uni.showToast({
      title: '请完善信息',
      icon: 'none'
    })
    return
  }
  if (!/^1[3456789]\d{9}$/.test(dataInfo.value.phone)) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none'
    })
    return
  }
  let msg = ''
  type.value==0?msg='添加成功':msg='修改成功'
  addressAdd(dataInfo.value).then((res:any)=>{
    console.log(res);

    uni.showToast({
      title: msg,
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateBack({
        delta: 1
      })
    }, 1000);
  })
}

</script>

<style lang="scss" scoped>
  .jiaAddress{padding: 26rpx;
    .bgRadius{padding:20rpx 30rpx;}
    .list{height: 86rpx;border-bottom: 1px solid #F2F3F5;
      .name{font-size: 28rpx;color: #323232;font-weight: bold;width: 130rpx;}
      input{border: none;outline: none;font-size: 28rpx;color: #333;width: 470rpx;}
      .my-data-picker{
        .selected{color: #969799;width: 470rpx;
          .selected-item{display: inline-block;padding: 20rpx 0;}
        }
      }
      textarea{border: none;outline: none;font-size: 28rpx;color: #333;width: 500rpx;height: 120rpx;}
      .moren{font-size: 28rpx;color: #323232;font-weight: bold;
       .tishi{font-size: 24rpx;color: #969799;margin-top: 10rpx;font-weight: normal;}
     }
    }
    .mt10{padding-top: 20rpx;}
    .list:last-child{border-bottom: none;}
    .tabIndex{
     image{width: 100%;height: 88rpx;}
    }
  }
  .footBont{position: fixed;bottom: 0;left: 0;width: 100%;padding-top: 20rpx;
    height: 120rpx;
    .addBtn{margin: 0 30rpx;background: #FE7431;color: #fff;border-radius: 80rpx;line-height: 80rpx;text-align: center;}
    }

</style>